<script lang="ts" setup>
import{reactive,ref,defineProps} from 'vue'
const props=defineProps({
    order:{
        type:Object,
        default:{}
    }
})
const activeName_order_products = ref(["0"]);
const handleChange = (val: string[]) => {
  console.log(val);
}
</script>
<template>
    <div>
        <div class="order-card">
      <div>
        <el-row style="background-color: rgb(248, 248, 248)">
          <el-col :span="3">
            <div class="order-id">
              <h1 style="color: aliceblue">#{{props.order.todayId }}</h1>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="vertical">
              <h3>{{ order.deliveryTimeType }}</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="vertical">
              <h3 style="color: rgb(188, 185, 13)">{{ order.deliveryAdvice }}</h3>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="vertical">
              <h3 style="color: rgb(20, 20, 19)">订单号:{{ order.orderId }}</h3>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="vertical" style="position: absolute; right: 2%">
              <h3 style="color: rgb(131, 133, 133)">{{ order.status }}</h3>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <div style="margin-left: 15%">
              <el-icon size="25">
                <User />
              </el-icon>
              <label class="card-item-value"><strong>{{ order.name }} 
                <label v-if="order.sex === '1'">(先生)</label> 
                <label  v-else>(女士)</label></strong> 
              </label>
            </div>
          </el-col>
          <el-col :span="3">
            <label style="font-size: 20px;color: silver;position: relative;left: 80%;">#下单{{ order.buyOrderNumber }}次</label>
          </el-col>
          <el-col>
            <div style="margin-left: 2%">
              <el-icon size="25">
                <Location />
              </el-icon>
              <label class="card-item-value">
                <strong>{{ order.address }}</strong>
              </label>
            </div>
          </el-col>
          <el-col>
            <div style="margin-left: 2%">
              <el-icon size="25">
                <PhoneFilled />
              </el-icon>
              <label class="card-item-value">
                <strong> {{ order.phone }}</strong>
              </label>
            </div>
          </el-col>
          <el-col>
            <div style="margin-left: 2%">
              <el-icon size="25">
                <ChatDotRound />
              </el-icon>
              <label class="card-item-value" style="background-color: rgb(239, 239, 233);"><strong> 
                <label  style="color: red;">|</label></strong> {{ order.remark }}</label>
            </div>
          </el-col>
        </el-row>

        <el-row style="background-color: rgb(248, 248, 248);border-bottom: 1px solid rgb(233, 227, 227);">
          <el-col>
            <div class="demo-collapse">
              <el-collapse v-model="activeName_order_products" @change="handleChange">
                <el-collapse-item title="Consistency" :name="order.orderId">
                  <template #title>
                    <div style="margin-left: 2%; margin-top: 1%">
                      <el-icon size="25">
                        <Goods />
                      </el-icon>
                    </div>
                    <label class="card-item-value">{{ order.buyProductList.length }}件商品</label>
                    <label style="position: absolute; right: 2%"><el-link :underline="false">展开</el-link></label>
                  </template>
                  <div>
                    <div v-for="product in order.buyProductList" class="product-item">
                      <div style="position: relative; top: 15px">
                        <div style="display: inline-block; width: 70%">
                          {{ product.name }}
                        </div>

                        <div style="display: inline-block; width: 15%">X{{ product.number }}</div>
                        <div style="display: inline-block; width: 15%">
                          {{ product.price }}
                        </div>
                        <div style="display: block;position: relative;right: 0.5%;color: red;">
                          <label v-if="product.spec !== '[]' && product.spec !== null">【{{ product.spec }}】</label>
                          <label v-if="product.prop !== '[]' && product.prop !== null">【{{ product.prop }}】</label>
                          <label v-if="product.char !== '[]' && product.char !== null">【{{ product.char }}】</label>
                        </div>
                      </div>
                      <el-divider />
                    </div>
                    <div>
                      <div class="product-item" style="color: silver">其他</div>
                      <div class="product-item">
                        <div style="display: inline-block; width: 85%">
                          包装费
                        </div>
                        <div style="display: inline-block; width: 15%">
                          {{ order.pktMoney }}
                        </div>
                      </div>
                      <div class="product-item">
                        <div style="display: inline-block; width: 85%">
                          配送费
                        </div>
                        <div style="display: inline-block; width: 15%">
                          {{ order.deliveryMoney }}
                        </div>
                      </div>
                    </div>
                    <div class="product-item">
                      <br />
                      <div style="display: inline-block;width: 85%;font-size: 20px;">
                        总计
                      </div>
                      <div style="display: inline-block;width: 15%;font-size: 20px;">
                        {{ order.allMoney }}
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <div style="margin-left: 2%;height: 50px;">
            <el-icon size="25">
              <Wallet />
            </el-icon>
            <div class="card-item-value" style="display: inline-block;width: 85%;">
              <div style="display: inline-block;width: 92%;">
                顾客实付
              </div>
              <div style="display: inline-block;"><strong>{{ order.amount }}</strong> </div>
              <div>
                <div style="display: inline-block;width: 92%;">
                  本单预计收入
                </div>
                <div style="display: inline-block;"><strong>{{ order.revenue }}</strong> </div>
              </div>
            </div>
          </div>
        </el-row>
        <el-row>
          <div style="margin-left: 80%;height: 50px;">
            <el-button round>退款</el-button>
            <el-button type="success" round>确认收货</el-button>
          </div>
        </el-row>
      </div>
    </div>

    </div>
</template>

<style lang="scss" scoped>

</style>